import { _decorator, Component, sys, SystemEventType, Canvas, view, game, macro, Layout } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ScreenConfigManager')
export class ScreenConfigManager extends Component {
    @property({ type: Canvas, tooltip: '需要处理的 Canvas 组件' })
    canvas: Canvas | null = null;

    @property(Layout)
    tubesLayout: Layout | null = null; // 试管布局组件

    start() {
        this.canvas.alignCanvasWithScreen = true;  // 设置 Canvas 对齐屏幕
        view.resizeWithBrowserSize(true);  // 设置视图大小跟随浏览器窗口大小变化,仅在 Web 模式下有效
        this.setTubeLayoutByOrientation(); // 初始化时设置试管布局
    }

    // 设置屏幕方向
    setOrientation() {
        const { width: w, height: h } = view.getFrameSize();
        view.setFrameSize(h, w);
        this.canvas.alignCanvasWithScreen = true;  // 设置 Canvas 对齐屏幕
        this.setTubeLayoutByOrientation();
    }

    // 根据屏幕方向设置试管布局每行最多试管数
    setTubeLayoutByOrientation() {
        if (!this.canvas || !this.tubesLayout) return;
        const frameSize = view.getFrameSize();
        const isLandscape = frameSize.width > frameSize.height;

        if (isLandscape) {
            view.setDesignResolutionSize(Math.abs(frameSize.height), Math.abs(frameSize.width), 3);
            this.tubesLayout.constraintNum = 12; // 横屏时试管布局每行最多 12 个试管
        } else {
            view.setDesignResolutionSize(Math.abs(frameSize.height), Math.abs(frameSize.width), 4);
            this.tubesLayout.constraintNum = 6; // 竖屏时试管布局每行最多 6 个试管
        }
    }
}
